// @author:赵振铎
// @Date:2022-4-22;

// 动态渲染本地存储中的购物车数据
var cart = JSON.parse(localStorage.getItem('cart'));
console.log(cart);

$.each(cart,function(index,value){
    $(`
    <ul class="cart-lists" data-gid=${value.goodid}>
    <li class="cart-check">
        <input type="checkbox" id="check${index}" class="son-check">
        <label for="check${index}"></label>
    </li>
    <li class="cart-con">
        <div class="cart-img">
            <a href=""><img src="${value.goodurls.nowurl}" alt=""></a>
        </div>
        <!-- <div class="cart-text fs12">美的【新品发售】 Beats Beats Solo3 Wireless 头戴式无线蓝牙耳机 分期免息 全国联保 免费保修一年</div> -->
        <a href="" class="cart-text fs12">${value.goodtitle}</a>
    </li>
    <li class="cart-price">
        <strong class="price">${value.goodprice}</strong> 
        <div class="promotion-info">
            <a href="" class="sales-promotion">促销活动
                <i class="iconfont icon-down"></i>
                <div class="promotion-tips">
                    <img src="../images/index/radio_checked2.png" alt="">
                    <span>test12/28</span>
                </div>
            </a>
           
        </div>
    </li>
    <li class="cart-amount">
        <div class="amount-box">
            <button class="reduce" disabled>-</button>
            <input type="text" value="${value.num}">
            <button class="add">+</button>
        </div>
        <div class="ftx-03">有货</div>
    </li>
    <li class="cart-sum">
        <strong class="price-sum">${(value.goodprice*value.num).toFixed(2)}</strong>
        <div>   </div>

    </li>
    <li class="cart-option">
        <a class="cart-dele">删除</a>
        <a href="">收藏</a>
    </li>
</ul>
    `).appendTo('.cart-content');
})

//1. 所有的复选框选中或者取消
$('input[type="checkbox"]').click(function () {
    console.log($(this));
    
    // console.log($(this).is(":checked"));
    if ($(this).is(":checked")) {
        $(this).next('label').addClass('active')
    } else {
        $(this).next('label').removeClass('active')
    }
});
// 2.全选选中-全选取消------合计
function total() {
    // 合计的个数
    var totalCount = 0;
    // 合计的价格
    var totalPrice = 0;
    $('.son-check').each(function () {
        if ($(this).is(':checked')) {
            // 数量
            var goodsCount = $(this).parents('.cart-lists').find('.amount-box').find('input').val();
            // 价格小计price-sum
            var goodsPrice = $(this).parents('.cart-lists').find('.price-sum').text();
            // 进行总计的计算
            totalCount += parseInt(goodsCount);
            totalPrice += parseFloat(goodsPrice);
        };
        // 设置到页面上
        $('.buy-num').text(totalCount);
        
        $('.sumPrice').text(totalPrice);
    });
    
};
// 全选按钮事件
$('.whole-check').click(function () {
    // 找到除了全选框其余的所有的checkbox
    // var checkboxCar = $('input[type=checkbox]').not('.whole-check');
    var checkboxCar = $('input[type=checkbox]');

    // console.log(checkboxCar);
    if ($(this).is(':checked')) {
        checkboxCar.prop('checked', true);
        checkboxCar.next('label').addClass('active')
    } else {
        checkboxCar.prop('checked', false);
        checkboxCar.next('label').removeClass('active')
    };
    // 调用总计
    total();
});

// 3.自营店铺的选择框选中,,全选选中-任何一个不选,全选取消          
// //  ------合计
$('.shop-check').click(function () {
    // 1.该店铺下所有的商品的选择框
    var sonCheckCar = $(this).parents('.cart-box').find('.son-check');
    if ($(this).is(':checked')) {
        sonCheckCar.prop('checked', true);
        sonCheckCar.next('label').addClass('active')
    } else {
        sonCheckCar.prop('checked', false);
        sonCheckCar.next('label').removeClass('active')
    };
    // 2.购物中所有的店铺的选择框是否被选中
    // 店铺被选中的个数
    var num = $('.shop-check:checked').length;
    // 购物车的店铺总数
    var count = $('.shop-check').length;
    // 做对比
    if (num == count) {
        $('.whole-check').prop('checked', true);
        $('.whole-check').next('label').addClass('active')
    } else {
        $('.whole-check').prop('checked', false);
        $('.whole-check').next('label').removeClass('active')
    };

    // 调用总计
    total();
});

// 4.该店铺商品全部选中,该店铺的选择框选中,任何一个不选,该店铺的选择框不选
$('.son-check').click(function () {
    // 找到该店铺
    var thisShop = $(this).parents('.cart-box');
    if ($(this).is(':checked')) {
        // 该店铺下所有被选中的商品的数量
        var num = thisShop.find('.son-check:checked').length;
        // 该店铺下的所有商品的数量
        var count = thisShop.find('.son-check').length;

        if (num == count) {
            thisShop.find('.shop-check').prop('checked', true);
            thisShop.find('.shop-check').next('label').addClass('active');
        } else {
            thisShop.find('.shop-check').prop('checked', false);
            thisShop.find('.shop-check').next('label').removeClass('active');
        }

    } else {
        thisShop.find('.shop-check').prop('checked', false);
        thisShop.find('.shop-check').next('label').removeClass('active');

    }
});


// // 5.商品全部选中,全选按钮选中-任何一个不选,全选取消 ------合计
$('.son-check').click(function () {
    // 购物车被选中的商品的数量
    var num = $('.son-check:checked').length;
    // 购物车所有商品的数量
    var count = $('.son-check').length;
    if (num == count) {
        $('.whole-check').prop('checked', true);
        $('.whole-check').next('label').addClass('active')
    } else {
        $('.whole-check').prop('checked', false);
        $('.whole-check').next('label').removeClass('active')
    };
    // 调用总计
    total();
});

// // 6.加事件 ------合计
$('.add').click(function () {
    // 点击加按钮后,将减按钮的禁用属性,变为false
    $(this).prevAll('.reduce').prop('disabled', false);
    var input = $(this).prev('input');
    var addNum = parseInt(input.val()) + 1;
    input.val(addNum);
    console.log(addNum);
    // 找单价
    var price = $(this).parents('.cart-lists').find(".price").text();
    console.log(price);
    // 拿单价*个数
    // 小计:
    $(this).parents('.cart-lists').find('.price-sum').text((price * addNum).toFixed(2));
    // 调用总计
    total();
});


// // 7.减事件 ------合计
$('.reduce').click(function () {
    // 根据父亲找子input
    var input = $(this).parents('.amount-box').find('input');
    console.log(input);
    var reduceNum = parseInt(input.val()) - 1;
    // 判断是否要禁用
    if (reduceNum == 1) {
        $(this).prop('disabled', true)
    };
    input.val(reduceNum);
    console.log(reduceNum);
    // 找单价
    var price = $(this).parents('.cart-lists').find(".price").text();
    console.log(price);
    // 拿单价*个数
    // 小计:
    $(this).parents('.cart-lists').find('.price-sum').text(price * reduceNum);

    // 调用总计
    total();
});


// // 8.输入产品计算商品价格小计 ------合计
var allInput = $('.amount-box').find('input');
allInput.keyup(function () {
    console.log($(this).val());
    // 整数/ 非之整数 /d(0-9) /D(不是0-9)
    var relExp = parseInt($(this).val().replace(/\D|^0/g, ''));
    console.log(relExp);
    if (!relExp) {
        relExp = 1;
    }
    $(this).val(relExp);

    // 拿单价
    var price = $(this).parents('.cart-lists').find(".price").text();
    // 小计:
    $(this).parents('.cart-lists').find('.price-sum').text(price * relExp);

    // 调用总计
    total();

});



// // 9.删除事件 ------合计
// // 10.模态框的取消和确定
$('.cart-dele').click(function () {
    var gid = $(this).parents('.cart-lists').data('gid');
    var dataList = JSON.parse(localStorage.getItem('cart'));
    // 显示蒙版和模态框
    $('.modal-bg').fadeIn();
    $('.del-kuang').fadeIn();
    $('.pb-x').off().click(function () {
        $('.modal-bg').fadeOut();
        $('.del-kuang').fadeOut();
    });

    // 删除整条商品的DOM元素
    var cartLists = $(this).parents('.cart-lists');
    // 整条店铺的DOM
    var cartBox = $(this).parents('.cart-box');
    // 所有商品信息--店铺的内容
    var cartContent = $(this).parents('.cart-content');

    $('.pb-ok').off().click(function () {
        // 删除
        cartLists.remove();
        console.log(cartLists);
        // 当删除后,店铺商品是否为0
        if (cartContent.children().length == 1) {
            cartBox.remove();
            $('.sumPrice').text(0);
            $('.buy-num').text(0);
            $('.cart-header').next().css('display','block');
        };

        // 同时删除本地存储中的数据
        // 查找对应数据，然后从对应位置删除一个数据
        for(var i =0;i<dataList.length;i++){
            if(dataList[i].goodid = gid){
                dataList.splice(i,1);
                break ;
            }
        }
        // 将处理后的数据重新设置到本地存储
        localStorage.setItem('cart',JSON.stringify(dataList));

        // 当删除后,店铺的商品的数量继续监听,影响店铺的选择框
        // 店铺被选中的商品的数量
        var num = cartBox.find('.son-check:checked').length;
        //店铺所有商品的数量
        var count = cartBox.find('.son-check').length;
        if (num == count) {
            cartBox.find('.shop-check').prop('checked', true);
            cartBox.find('.shop-check').next('label').addClass('active');
        } else {
            cartBox.find('.shop-check').prop('checked', false);
            cartBox.find('.shop-check').next('label').removeClass('active');
        };

        // 全选监听
        var shopCheckNum = $('.shop-check:checked').length;
        // 所有的
        var shopCheckCount = $('.shop-check').length;

        if (shopCheckNum == shopCheckCount) {
            $('.whole-check').prop('checked', true);
            $('.whole-check').next('label').addClass('active')
        } else {
            $('.whole-check').prop('checked', false);
            $('.whole-check').next('label').removeClass('active')
        };
        // 模态框消失
        $('.modal-bg').fadeOut();
        $('.del-kuang').fadeOut();
        // 调用总计
        total();

    });
})






